<template>
    <div>
        <table border="1" width="400" align="center">
    <caption><h2>学生信息列表</h2></caption>
    <tbody>
    <tr>
        <td>学号</td>
        <td>姓名</td>
        <td>年龄</td>
    </tr>
    <tr v-for="(user,index) in listobj" :key="index">
        <td>{{user.id}}</td>
        <td>{{user.name}}</td>
        <td>{{user.age}}</td>
    </tr>
    </tbody>
</table>
    </div>
</template>

<script>
import { reactive, toRefs } from 'vue'

export default {
    setup () {
        const state = reactive({
            listobj:[
        {id:1,name:"john",age:25},
        {id:2,name:"lisa",age:21},
        {id:3,name:"Seven",age:18},
        {id:4,name:"Inn",age:22},
        {id:5,name:"Bob",age:17},
      ]
        })
    
        return {
            ...toRefs(state),
        }
    }
}
</script>

<style lang="scss" scoped>

</style>